<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文章 - 美食社区</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .post-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .post-img-container {
            height: 200px;
            overflow: hidden;
        }
        .post-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .post-card:hover .post-img-container img {
            transform: scale(1.1);
        }
        .empty-posts {
            text-align: center;
            padding: 50px 0;
            color: #6c757d;
        }
        .empty-posts i {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .post-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: none;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 5px 10px;
        }
        .post-card:hover .post-actions {
            display: block;
        }
        .post-actions a {
            color: #6c757d;
            margin: 0 5px;
            text-decoration: none;
        }
        .post-actions a:hover {
            color: #fd7e14;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{common/header :: header}"></nav>

    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="section-title">我的文章</h2>
            <a href="/posts/create" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>发布文章
            </a>
        </div>

        <!-- 文章列表 -->
        <div class="row g-4" th:if="${not #lists.isEmpty(posts)}">
            <div class="col-md-4" th:each="post : ${posts}">
                <div class="card post-card">
                    <div class="post-img-container">
                        <img th:src="${post.firstImage}" class="card-img-top" th:alt="${post.title}">
                        <div class="post-actions">
                            <a th:href="@{'/posts/edit/' + ${post.id}}" title="编辑">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="javascript:void(0);" th:onclick="'deletePost(' + ${post.id} + ')'" title="删除">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" th:text="${post.title}"></h5>
                        <p class="card-text" th:text="${post.summary}"></p>
                    </div>
                    <div class="card-footer bg-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted" th:text="${#temporals.format(post.createTime, 'yyyy-MM-dd HH:mm')}"></small>
                            <div class="post-stats">
                                <span class="me-3">
                                    <i class="fas fa-heart text-danger"></i>
                                    <span th:text="${post.likes}"></span>
                                </span>
                                <span>
                                    <i class="fas fa-eye text-primary"></i>
                                    <span th:text="${post.views}"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 空状态 -->
        <div class="empty-posts" th:if="${#lists.isEmpty(posts)}">
            <i class="fas fa-file-alt"></i>
            <h3>还没有发布过文章</h3>
            <p class="text-muted">分享你的美食故事，让更多人了解美食的魅力</p>
            <a href="/posts/create" class="btn btn-primary mt-3">
                <i class="fas fa-plus me-2"></i>发布第一篇文章
            </a>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function deletePost(postId) {
            if (confirm('确定要删除这篇文章吗？')) {
                $.ajax({
                    url: '/api/posts/' + postId,
                    method: 'DELETE',
                    success: function(res) {
                        if (res.code === 200) {
                            alert('删除成功！');
                            window.location.reload();
                        } else {
                            alert(res.message || '删除失败，请重试');
                        }
                    },
                    error: function() {
                        alert('删除失败，请重试');
                    }
                });
            }
        }
    </script>
</body>
</html> 